/*
 * @description: 店铺信息
 * @Author: along
 * @Date: 2021-04-12
 * @Last Modified by: along
 * @Last Modified time: --
 */
<template>
    <div class="container zsdxShop">
        <p class="_title">店铺信息</p>
        <!-- tabs -->
        <div class="_tabs">
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="基础信息" name="first" />
                <el-tab-pane label="主体信息" name="second" />
                <el-tab-pane label="账号管理" name="third" />
            </el-tabs>
        </div>

        <!-- content -->
        <shop-basic-info v-if="activeName == 'first'"></shop-basic-info>
        <shop-subject-info v-if="activeName == 'second'"></shop-subject-info>
        <shop-account-manage v-if="activeName == 'third'"></shop-account-manage>
    </div>
</template>

<script>
import { mapState } from 'vuex';
import shopBasicInfo from '@/components/manage/shop/shop-basic-info.vue';
import shopSubjectInfo from '@/components/manage/shop/shop-subject-info.vue';
import shopAccountManage from '@/components/manage/shop/shop-account-manage.vue';
export default {
    components: {
        shopSubjectInfo, shopBasicInfo, shopAccountManage
    },
    mixins: [],
    data() {
        return {
            activeName: 'third',
        };
    },
    filters: {
    },
    computed: {
    },
    watch: {
        ...mapState({

        })
    },
    mounted() {
        this.init();
    },
    methods: {
        /**
         * @description 初始化页面
         */
        init () {
            this.$store.commit('header/SET_HEADER',[{ title: '校园商城' }, { title: '店铺管理' }, { title: '店铺信息' }]);
        },

        /**
         * @description
         */
        handleClick () {

        }
    },
};
</script>

<style lang="less" scoped>
.zsdxShop {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #ffffff;
    box-sizing: border-box;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    ._title {
        width: 100%;
        height: 58px;
        line-height: 58px;
        color: rgba(51, 51, 51, 1);
        box-sizing: border-box;
        padding-left: 24px;
    }
}
</style>
<style lang="less">
.zsdxShop {
    .el-tabs__nav-scroll {
        padding-left: 24px;
    }
    .el-tabs__item {
        height: 47px;
        color: rgba(102, 102, 102, 1);
    }
    .el-tabs__item.is-active {
        color: rgba(32, 160, 255, 1);
    }
}
</style>